<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="https://oss.gaojie.cc/mallfavicon.ico">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录-BookShop</title>
    <link rel="stylesheet" href="https://oss.gaojie.cc/buefy.min.css">
    <!-- <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/cerulean/bulmaswatch.min.css"> -->

    <link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">


</head>

<body>
<header id="header">
    <div class="container"></div>
</header>

<div id="breadcrumb"></div>

<div id="banner" class="container">

</div>


<div id="simpleShopLogin" class="hero is-fullheight" style="position: relative;">
    <div class="hero-body" style="position: relative; ">

        <!-- 这个是登录的盒子 -->
        <div v-if="loginForm" class="container">
            <div class="columns is-centered">
                <div class="column is-5-desktop is-4-fullhd">
                    <div class="box mt-6">
                        <p class="subtitle has-text-centered">电商后台管理系统</p>
                        <form action="/login" method="post">
                            <div class="mb-2">
                                <div class="field is-floating-label">
                                    <!-- 账号图标 -->
                                    <label class="label"><i class="fa fa-user" aria-hidden="true"></i></label>
                                    <div class="control is-clearfix">
                                        <input type="text" autocomplete="username" maxlength="150" name="u"
                                               autofocus="autofocus" autocapitalize="none" required="required"
                                               id="id_username1" class="input" placeholder="请输入用户名或邮箱">
                                        <small class="help counter is-invisible"> 5 / 150 </small>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-2">
                                <!-- 密码图标 -->
                                <div class="field is-floating-label"><label class="label"><i class="fa fa-lock"
                                                                                             aria-hidden="true"></i></label>
                                    <div class="control is-clearfix">
                                        <input type="password" autocomplete="current-password" name="p"
                                               required="required" id="id_password1" class="input" placeholder="请输入密码">
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="next" value=""> <input type="hidden" name="next"
                                                                              value="">
                            <div class="mb-2" style="margin-top: 20px;"><label
                                    style="color: rgba(80, 197, 226, 0.5); font-size: 1em; font-weight: 600;">&nbsp;验证码：</label>
                                <input name="c" type="text" autocomplete="off" style="width: 109px; height: 33px;">
                                <img src="/code" id="ccc"
                                     style="width: 135px; height: 33px; vertical-align: -9px; margin-left: 12px;"> <a
                                        href="javascript:void(0)" onclick="changCode()"
                                        style="font-size: 4px; margin-left: 14px;">换一张</a>
                            </div>
                            <div class="is-size-7 has-text-grey-light mb-3"><a @click="changeForm">忘记了您的密码或用户名？</a>
                            </div>
                            <input type="submit" value="登录" class=" button is-fullwidth is-primary">
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 这个是找回密码的盒子 -->
        <div v-if="!loginForm" class="container">
            <div class="columns is-centered">
                <div class="column is-5-desktop is-4-fullhd">
                    <div class="box mt-6">
                        <p class="subtitle has-text-centered">找回密码</p>
                        <form action="http://localhost:8080/login" method="post">
                            <div class="mb-2">
                                <div class="field is-floating-label">
                                    <!-- 账号图标 -->
                                    <label class="label"><i class="fa fa-envelope" aria-hidden="true"></i></label>
                                    <div class="control is-clearfix">
                                        <input type="text" autocomplete="username" maxlength="150" name="u"
                                               autofocus="autofocus" autocapitalize="none" required="required"
                                               id="id_username2" class="input" placeholder="请输入邮箱（回车获取验证码）">
                                        <small class="help counter is-invisible"> 5 / 150 </small>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-2">
                                <div class="field is-floating-label">
                                    <!-- 账号图标 -->
                                    <label class="label"><i class="fa fa-indent" aria-hidden="true"></i></label>
                                    <div class="control is-clearfix">
                                        <input type="text" autocomplete="username" maxlength="150" name="u"
                                               autofocus="autofocus" autocapitalize="none" required="required"
                                               id="id_username3" class="input" placeholder="请输入您收到的验证码">
                                        <small class="help counter is-invisible"> 5 / 150 </small>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-2">
                                <div class="field is-floating-label">
                                    <!-- 重复 -->
                                    <label class="label"><i class="fa fa-lock" aria-hidden="true"></i></label>
                                    <div class="control is-clearfix">
                                        <input type="text" autocomplete="username" maxlength="150" name="u"
                                               autofocus="autofocus" autocapitalize="none" required="required"
                                               id="id_username4" class="input" placeholder="请输入新密码">
                                        <small class="help counter is-invisible"> 5 / 150 </small>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-2">
                                <!-- 密码图标 -->
                                <div class="field is-floating-label"><label class="label"><i class="fa fa-lock"
                                                                                             aria-hidden="true"></i></label>
                                    <div class="control is-clearfix"><input type="password"
                                                                            autocomplete="current-password" name="p"
                                                                            required="required"
                                                                            id="id_password" class="input"
                                                                            placeholder="请重复新密码"></div>
                                </div>
                            </div>
                            <input type="hidden" name="next" value=""> <input type="hidden" name="next" value="">


                            <div class="is-size-7 has-text-grey-light mb-3"><a @click="changeForm">返回登录</a>
                            </div>
                            <input type="submit" value="修改密码" class=" button is-fullwidth is-primary">
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </div>

</div>


<script src="https://oss.gaojie.cc/vue.js"></script>
<script src="https://oss.gaojie.cc/buefy.min.js"></script>
<%--<script src="https://oss.gaojie.cc/request.js"></script>--%>

<%--<script src="https://oss.gaojie.cc/breadcrumb.js"></script>--%>


<script>
    var simpleShopLogin = new Vue({
        el: "#simpleShopLogin",
        data: {
            labelPosition: 'on-border',
            loginForm: true,
        },
        methods: {
            changeForm() {
                this.loginForm = !this.loginForm;
            }
        }
    })
</script>

<!-- 波浪 -->
<script src="https://oss.gaojie.cc/three.min.js"></script>
<script src="https://oss.gaojie.cc/vanta.waves.min.js"></script>
<script>
    VANTA.WAVES({
        el: "#simpleShopLogin",
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00
    })
</script>

<script>
    function changCode() {
        ccc.src = "/code?t=" + Math.random();
    }
</script>


</body>

</html>